<template>
  <div id="chat"></div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onBeforeMount, onMounted } from "vue";
let timer: NodeJS.Timeout;
let option = {
  tooltip: {
    type: "showTip",
    trigger: "axis",
    axisPointer: {
      type: "shadow",
      axis: "y",
    },
  },
  legend: {
    top: "5%",
    left: "center",
    textStyle: {
      color: "#fff", //自定义文字字体颜色
      fontSize: 12,
    },
  },
  grid: {
    left: "5%",
    top: "25%",
    right: "5%",
    bottom: "0%",
    containLabel: true,
  },
  xAxis: {
    show: false,
  },
  yAxis: {
    type: "category",
    data: [
      "海鸥市民贷",
      "宅抵e贷",
      "银税e贷",
      "商超e贷",
      "天行用呗",
      "海鸥市民贷",
      "宅抵e贷",
      "银税e贷",
      "商超e贷",
      "天行用呗",
    ],
    axisTick: {
      //刻度线
      show: false,
    },
    axisLine: {
      lineStyle: {
        width: 0,
      },
    },
    axisLabel: {
      fontSize: 15,
      color: "#fff",
    },
    // verticalAlign: "bottom",
  },
  color: ["#ff0000", "#ffff00", "#0070c0", "#98c0fd", "#26c847"],
  series: [
    {
      name: "5级",
      type: "bar",
      barWidth: 16,
      barCategoryGap: "5%",
      barGap: "10%",
      stack: "total",
      emphasis: { focus: "series" },
      itemStyle: { borderWidth: 0.5, barBorderRadius: [15, 0, 15, 0] },
      data: [5, 6, 7, 8, 9, 10, 1, 2, 3, 4],
    },
    {
      name: "4级",
      type: "bar",
      stack: "total",
      barWidth: 10,
      barCategoryGap: "5%",
      barGap: "10%",
      emphasis: { focus: "series" },
      itemStyle: { borderWidth: 0.5, barBorderRadius: [15, 0, 15, 0] },
      data: [4, 5, 1, 2, 1, 2, 3, 3, 4, 10],
    },
    {
      name: "3级",
      type: "bar",
      stack: "total",
      barWidth: 10,
      barCategoryGap: "5%",
      barGap: "10%",
      emphasis: { focus: "series" },
      itemStyle: { borderWidth: 0.5, barBorderRadius: [15, 0, 15, 0] },
      data: [5, 6, 7, 8, 1, 2, 3, 4, 9, 10],
    },
    {
      name: "2级",
      type: "bar",
      stack: "total",
      barWidth: 10,
      barCategoryGap: "5%",
      barGap: "10%",
      emphasis: { focus: "series" },
      itemStyle: { borderWidth: 0.5, barBorderRadius: [15, 0, 15, 0] },
      data: [1, 2, 7, 8, 9, 3, 4, 5, 6, 10],
    },
    {
      name: "1级",
      type: "bar",
      stack: "total",
      barWidth: 10,
      barCategoryGap: "5%",
      barGap: "10%",
      emphasis: { focus: "series" },
      itemStyle: { borderWidth: 0.5, barBorderRadius: [15, 0, 15, 0] },
      data: [5, 6, 7, 8, 1, 2, 3, 4, 9, 10],
    },
  ],
  dataZoom: [
    {
      show: false, // 是否显示滑动条,
      yAxisIndex: 0, // 这里是从y轴的0刻度开始
      startValue: 0, // 数据窗口范围的起始数值
      endValue: 4, // 数据窗口范围的结束数值(一次性展示几个,不算滑动的)
    },
  ],
};
onMounted(() => {
  let myChart = echarts.init(document.getElementById("chat") as HTMLDivElement);
  myChart.setOption(option);

  //  每一秒第一个柱子的变为最后一个柱子，实现柱子的滚动,并且柱子滚动的时候，加上渲染的动画
  timer = setInterval(() => {
    let data = option.series[0].data;
    let data1 = option.series[1].data;
    let data2 = option.series[2].data;
    let data3 = option.series[3].data;
    let data4 = option.series[4].data;
    let data5 = option.yAxis.data;
    data.push(data.shift() as number);
    data1.push(data1.shift() as number);
    data2.push(data2.shift() as number);
    data3.push(data3.shift() as number);
    data4.push(data4.shift() as number);
    data5.push(data5.shift() as string);
    myChart.setOption(option);
  }, 4000);

  // 监听页面的大小
  window.addEventListener("resize", () => {
    myChart.resize();
  });
});

onBeforeMount(() => {
  window.removeEventListener("resize", () => {});
  clearInterval(timer);
});
</script>

<style scoped lang="scss">
#chat {
  width: 100%;
  height: calc(100% - 47px);
}
</style>
